/* .show{
  opacity: 1;
  transition: all .3s;
}

.hide{
  opacity: 0;
  transition: all .3s;
} */

.show {
  animation: show-item 1s ease-in forwards;
}

.hide {
  animation: hide-item 1s ease-in forwards;
}

@keyframes show-item {
  0% {
    opacity: 0;
    color: red;
  }
  50% {
    opacity: .5;
    color: green;
  }
  100% {
    opacity: 1;
    color: blue;
  }
}

@keyframes hide-item {
  0% {
    opacity: 1;
    color: red;
  }
  50% {
    opacity: .5;
    color: green;
  }
  100% {
    opacity: 0;
    color: blue;
  }
}

/* CSStransition 所使用的类 */

/* fade 为 class 前缀，且为 CSSTransition 组件的 classNames 属性值 */
/* 当 in 的值从 flase 变为 true 时，也就是入场动画的第一帧所添加的 class */
.fade-enter, .fade-appear{
  opacity: 0;
  display: block;
}

/* 从第二帧到入场动画执行完毕所添加的 class */
.fade-enter-active, .fade-appear-active{
  opacity: 1;
  transition: opacity .3s ease-in;
}

/* 整个入场动画执行完成后所添加的 class */
.fade-enter-done{
  opacity: 1;
}

/* 出场动画的第一帧所添加的 class */
.fade-exit{
  opacity: 1;
}

/* 从第二帧到出场动画执行完毕所添加的 class */
.fade-exit-active{
  opacity: 0;
  transition: opacity .3s ease-in;
}

/* 整个出场动画执行完成后所添加的 class */
.fade-exit-done{
  opacity: 0;
  display: none;
}
